{extend name="public/base" /}
{block name="body"}
<div class="ibox float-e-margins">
<div class="content-tabs">
	<ol class="breadcrumb">
		<li>
			<a href="{:url('index/index')}"><i class="fa fa-home"></i></a>
		</li>
		<li><strong>订单统计</strong></li>
	</ol>
</div>
	<div class="ibox-content">
		<form id="myForm" class="form-horizontal m-t" method="post" action="{:url('index')}">
			<div class="order-info panel panel-default">
				<div class="panel-heading">
					<strong><i class="fa fa-bar-chart" style="color:#f70;"></i>&nbsp;&nbsp;订单数统计</strong>&nbsp;&nbsp;
				</div>
				<div class="panel-body clearfix">
					<div class="info-group">
						<span class="h4">
							{$todaysum}
						</span>
						<span class="info-description">今日订单数</span>
					</div>
					<div class="info-group">
						<span class="h4">
							{$weeksum}
						</span>
						<span class="info-description">7天订单数</span>
					</div>
					<div class="info-group">
						<span class="h4">
							{$monthsum}
						</span>
						<span class="info-description">本月订单数</span>
					</div>	
					<div class="info-group">
						<span class="h4">
							{$sum}
						</span>
						<span class="info-description">总计订单数</span>
					</div>
				</div>
			</div>	
			<!--统计图-->
			<div id="main" style="width: 100%;height:400px;"></div>
       </form>    
	</div>
</div>
{/block} {block name="script"}
<script src="__JS__/jquery.form.js"></script>
<script src="__LIB__/validate/jquery.validate.min.js"></script>
<script src="__LIB__/validate/messages_zh.min.js"></script>
<script src="__LIB__/validate/add_validate.min.js"></script>
<script src="__LIB__/fileinput/js/fileinput.min.js"></script>
<script src="__LIB__/fileinput/js/locales/zh.js"></script>
<script src="__JS__/echarts.common.min.js"></script>
<style>
	.order-info .info-group{width:25%; text-align:center; float:left;}
	.order-info .info-group+.info-group{border-left:1px dotted #ccc; }
	.h4{font-size:22px; display:block;}
	
	
</style>
<script>
	var myChart = echarts.init(document.getElementById('main'));

option = {
    title: {
        text: '订单统计'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['下单笔数','付款订单','发货订单']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'下单笔数',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'付款订单',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'发货订单',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        }
	    ]
};
	    myChart.setOption(option);
</script>
{/block}